<template>
  <div class="home">


    <div class="container">

      <div class="left">
        <van-icon name="photo"  class="icon" style="width:30px"/>
      </div>
      <div class="search">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </div>

      <!-- 首页显示的地区 -->
      <div class="adresss" @click="$router.push('/citySelect')">
        {{city}}<van-icon name="arrow-down" class="icon" />
      </div>

    </div>



        <h3>ul>li{$}*4</h3>
        <h3>ul.list>li.item{$}*10</h3>

        <div class="wrapper">
          <ul class="content">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
            <li>6</li>
          </ul>
        </div>

    



  </div>
</template>

<script>

import { mapState } from 'vuex';
import BScroll from 'better-scroll'


export default {
  name: 'home',
  data(){
    return{
        
        value:""
    }
  },
  components: {
    
  },

  mounted(){
    

    let wrapper = document.querySelector('.wrapper');
    new BScroll(wrapper);




  },

  

   computed:{
        ...mapState(['city'])
    },



}
</script>




<style scoped lang="less">

  .container{
    display: flex;

    .left{
        font-size:8vw;
        padding-right: 4vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .search{
      min-width: 48vw;
    }

    .adresss{
      display: flex;
      // flex:1;
      width: 80%;
      justify-content: center;
      align-items: center;
      

      .icon{
        padding-left: 1.367vw;
      }
    }
    


  }


.wrapper{ 
    height: 100px; 
    overflow: hidden; 
    background: #eee;
    text-align: center;
  }




</style>






